<template>
  <div class="header">
    <div class="slogan">
      <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
    </div>
    <div class="nav">
      <ul class="left-part">
        <li class="logo">
          <router-link to="/">
            <img src="../assets/img/head-logo.svg" alt="">
          </router-link>
        </li>
        <li class="ele">
          <span @click="goPage('/free')" :class="{active: url_path === '/free'}">免费课</span>
        </li>
        <li class="ele">
          <span @click="goPage('/actual')" :class="{active: url_path === '/actual'}">实战课</span>
        </li>
        <li class="ele">
          <span @click="goPage('/light')" :class="{active: url_path === '/light'}">轻课</span>
        </li>
      </ul>

      <div class="right-part">
        <div v-if="username && username.length>0">
          <span>
            <el-avatar :size="50" :src="icon"></el-avatar>
          </span>
          <span>{{ username }}</span>
          <span class="line">|</span>
          <span @click="handleLogout">注销</span>
        </div>
        <div v-else>
          <span @click="put_login">登录</span>
          <span class="line">|</span>
          <span @click="put_register">注册</span>
        </div>
      </div>
      <LoginView v-if="is_login" @close="close_login" @go="put_register"></LoginView>
      <RegisterView v-if="is_register" @close="close_register" @go="put_login"></RegisterView>
    </div>
  </div>
</template>
<script>
import LoginView from "@/views/LoginView.vue";
import RegisterView from "@/views/RegisterView.vue";

export default {
  name: "Header",
  data() {
    return {
      url_path: sessionStorage.url_path || '/',
      is_login: false,
      is_register: false,
      username: '',
      icon: '',
    }
  },
  methods: {
    handleLogout() {
      this.username = ''
      this.$cookies.remove('username')
      this.$cookies.remove('token')
      this.$cookies.remove('icon')
    },
    put_login() {
      this.is_login = true;
      this.is_register = false;
    },
    put_register() {
      this.is_login = false;
      this.is_register = true;
    },
    close_login() {
      // 子组件登陆成功或点击X，触发我
      this.is_login = false;
      // 如果是登陆成功，取出用户名
      this.username = this.$cookies.get('username')
    },
    close_register() {
      this.is_register = false;
    },
    goPage(url_path) {
      if (this.url_path !== url_path) {
        this.$router.push(url_path);
      }
      // 已经是当前路由就没有必要重新跳转
      sessionStorage.url_path = url_path;
    },
  },
  created() {
    // this.$route.path 当前路径
    sessionStorage.url_path = this.$route.path;
    this.url_path = this.$route.path;
    //当页面刷新，从cookie中取出用户名
    this.username = this.$cookies.get('username')
    //当页面刷新，从cookie中取出头像
    this.icon = this.$cookies.get('icon')
  },
  components: {
    LoginView, RegisterView
  }
}
</script>
<style scoped>
.header {
  background-color: white;
  box-shadow: 0 0 5px 0 #aaa;
}

.header:after {
  content: "";
  display: block;
  clear: both;
}

.slogan {
  background-color: #eee;
  height: 40px;
}

.slogan p {
  width: 1200px;
  margin: 0 auto;
  color: #aaa;
  font-size: 13px;
  line-height: 40px;
}

.nav {
  background-color: white;
  user-select: none;
  width: 1200px;
  margin: 0 auto;

}

.nav ul {
  padding: 15px 0;
  float: left;
}

.nav ul:after {
  clear: both;
  content: '';
  display: block;
}

.nav ul li {
  float: left;
}

.logo {
  margin-right: 20px;
}

.ele {
  margin: 0 20px;
}

.ele span {
  display: block;
  font: 15px/36px '微软雅黑';
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.ele span:hover {
  border-bottom-color: orange;
}

.ele span.active {
  color: orange;
  border-bottom-color: orange;
}

.right-part {
  float: right;
}

.right-part .line {
  margin: 0 10px;
}

.right-part span {
  line-height: 68px;
  cursor: pointer;
}
</style>